<template>
  <div>
    <app-search></app-search>
    <van-row>
      <van-col span="4">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            v-for="(item,index) in this.goodstitle"
            :key="item"
            :title="item"
            @click="getlist(index)"
          />
        </van-sidebar>
      </van-col>
    </van-row>
    <!--  -->
    <div class="list-rigth">
      <div class="goodslist" v-for="item in this.goods" :key="item.title">
        <p class="title">
          <font></font>
          {{item.title}}
          <font></font>
        </p>
        <div class="list" v-for="value in item.goodslist" :key="value.id">
          <div class="img">
            <img :src="value.img" alt @click="getdata(value)" />
          </div>
          <span class="tex">{{value.name}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import appSearch from "../components/appsearch";

export default {
  data() {
    return {
      activeKey: 0,
      cname: "个护美妆",
      a:"￥10",
      b:"",
      goodstitle: [
        "个护美妆",
        "食品健康",
        "餐厨日用",
        "服装配饰",
        "布艺家纺",
        "家电数码",
        "母婴呵护",
        "芒果汽车",
        "品牌馆"
      ],
      goods: "",
    };
  },
  methods: {
   
    async getgoodslist2(cid) {
      let { data } = await this.$axios.get(
        "http://localhost:5555/listbo/list1",
        {
          params: { cid }
        }
      );
      this.goods = data;
    },
    
    getlist(index) {
      //点哪个就跳到哪个分类
      let num = index + 1;
      this.getgoodslist2(num);
    },
    getdata(value) {
      //点击商品进入商品列表页
      let { title,name } = value;
      // window.console.log({ title,name });
      this.$router.push({ name: "list2", query: { title,name } });
    }
  },
  created() {
    this.getgoodslist2(1);
    this.b = this.a.split("￥")[1]
    console.log(this.b);
    
  },
  components: {
    appSearch
  }
};
</script>
<style  scopde>
body,html{
  background: white
}
.van-search {
  position: fixed;
  width: 100%;
  z-index: 2;
  top: 0;
}
.van-row {
  float: left;
  position: fixed;
  top: 1.4rem;
}
.list-rigth {
  float: right;
  margin-bottom: 2rem;
}
.listul {
  overflow: hidden;
}
.listli {
  width: 25%;
  height: 50px;
  margin: 5px;
}
.listli img {
  width: 100%;
}
.list-rigth {
  width: 75%;
  float: right;
}
.title {
  font-size: 14px;
  margin: 0.5rem 0;
}
.list {
  width: 2rem;
  float: left;
  margin: 0.15rem 0.18rem;
  height: 2.5rem;
  position: relative;
}
.list img {
  width: 100%;
  float: left;
}
.goodslist {
  width: 267px;
  margin-bottom: 0.5rem;
  overflow: hidden;
}
.title font {
  position: relative;
  top: -0.3em;
  display: inline-block;
  height: 1px;
  width: 2em;
  background-color: #d3d3d3;
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform: scaleY(0.5);
  -webkit-transform: scaleY(0.5);
}
.tex {
  width: 2rem;
  font-size: 14px;
  display: inline-block;
  position: absolute;
  top: 2rem;
  left: 0;
}
</style>
